---
import { MetaData } from './lib/MetaData';
import { ExampleStyle } from './lib/ExampleStyle';
import { Styles } from './lib/Styles';
import { Extras } from './lib/Extras';
import { SystemJs } from './lib/SystemJs';
import { pathJoin } from '@utils/pathJoin';
import { getCacheBustingUrl } from '@utils/gridLibraryPaths';

interface Props {
    isDev: boolean;
    title: string;
    isEnterprise: boolean;

    modifiedTimeMs: number;
    entryFileName: string;

    styleFiles?: string[];
    indexFragment: string;
    appLocation: string;
    boilerplatePath: string;
    extraStyles?: string;
    extras?: string[];
    headFragment?: string;
    usesMathRandom?: boolean;
    nonce?: string;
}

const {
    title,
    isDev,
    isEnterprise,
    modifiedTimeMs,
    appLocation,
    entryFileName,
    styleFiles,
    indexFragment,
    boilerplatePath,
    extraStyles,
    extras,
    headFragment,
    usesMathRandom,
    nonce,
} = Astro.props as Props;

const startFile = pathJoin(appLocation, entryFileName);
---

<html lang="en">
    <head>
        <MetaData isDev={isDev} title={`Typescript Example - ${title}`} modifiedTimeMs={modifiedTimeMs} />
        <ExampleStyle extraStyles={extraStyles} />
        <Styles
            baseUrl={appLocation}
            files={isDev && styleFiles
                ? styleFiles
                      .filter((file: string) => !file.includes('style.css') && !file.includes('styles.css'))
                      .map((file: string) => getCacheBustingUrl(file, modifiedTimeMs))
                : []}
        />
        <Extras extras={extras ?? []} />
        <Fragment set:html={headFragment} />
    </head>
    <body>
        <Fragment set:html={indexFragment} />

        <script
            is:inline
            nonce={nonce}
            define:vars={{
                appLocation,
            }}
        >
            window.__basePath = appLocation;
        </script>

        <SystemJs
            isDev={isDev}
            boilerplatePath={boilerplatePath}
            appLocation={appLocation}
            startFile={startFile}
            internalFramework={'typescript'}
            isEnterprise={isEnterprise}
            usesMathRandom={usesMathRandom}
            nonce={nonce}
        />
        <Styles
            baseUrl={appLocation}
            files={styleFiles
                ? styleFiles.filter((file: string) => file.includes('style.css') || file.includes('styles.css'))
                : []}
        />
        <slot />
    </body>
</html>
